<template>
    <div>
        <button @click="addEmps">增加员工信息</button>
        <h2>所有员工信息</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp,index) in emps" :key="emp.empno">
                    <td>{{index+1}}</td>
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.hiredate}}</td>
                    <td>{{emp.sal}}</td>
                    <td>{{emp.comm}}</td>
                    <td>{{emp.deptno}}</td>
                    <td>
                        <button @click="updateSal(index)">涨薪</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="9">平均工资:{{allEmpsAvgSal}}</td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <h2>10部门所有员工信息</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>部门</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp,index) in tenDeptEmps" :key="emp.empno">
                    <td>{{index+1}}</td>
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.hiredate}}</td>
                    <td>{{emp.sal}}</td>
                    <td>{{emp.comm}}</td>
                    <td>{{emp.deptno}}</td>
                </tr>
            </tbody>
             <tfoot>
                <tr>
                    <td colspan="8">平均工资:{{tenEmpsAvgSal}}</td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>部门</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp,index) in tenDeptEmps" :key="emp.empno">
                    <td>{{index+1}}</td>
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.hiredate}}</td>
                    <td>{{emp.sal}}</td>
                    <td>{{emp.comm}}</td>
                    <td>{{emp.deptno}}</td>
                </tr>
            </tbody>
             <tfoot>
                <tr>
                    <td colspan="8">平均工资:{{tenEmpsAvgSal}}</td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>工号</td>
                    <td>姓名</td>
                    <td>职位</td>
                    <td>入职日期</td>
                    <td>工资</td>
                    <td>奖金</td>
                    <td>部门</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(emp,index) in tenDeptEmps" :key="emp.empno">
                    <td>{{index+1}}</td>
                    <td>{{emp.empno}}</td>
                    <td>{{emp.ename}}</td>
                    <td>{{emp.job}}</td>
                    <td>{{emp.hiredate}}</td>
                    <td>{{emp.sal}}</td>
                    <td>{{emp.comm}}</td>
                    <td>{{emp.deptno}}</td>
                </tr>
            </tbody>
             <tfoot>
                <tr>
                    <td colspan="8">平均工资:{{tenEmpsAvgSal}}</td>
                </tr>
            </tfoot>
        </table>
        <hr>
        <h2>计算属性的标准写法</h2>
        <h2>姓名：{{name}}</h2>
        <button @click="name='wang xiao hua'">改名字</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            emps:[
                {
                    empno:'7369',
                    ename:'SMITH',
                    job:'MANGER',
                    hiredate:new Date('2020','01','05'),
                    sal:1200,
                    comm:0,
                    deptno:10
                },
                {
                    empno:'7499',
                    ename:'KING',
                    job:'SALES',
                    hiredate:new Date('2021','02','06'),
                    sal:8000,
                    comm:10000,
                    deptno:20
                },
                {
                    empno:'7684',
                    ename:'JACK',
                    job:'SALES',
                    hiredate:new Date('2009','08','05'),
                    sal:6200,
                    comm:100,
                    deptno:10
                },
                {
                    empno:'7987',
                    ename:'JERRY',
                    job:'SALE',
                    hiredate:new Date('2020','01','05'),
                    sal:3200,
                    comm:100,
                    deptno:10
                },
                {
                    empno:'7654',
                    ename:'JAHONE',
                    job:'MANGER',
                    hiredate:new Date('2020','01','05'),
                    sal:9200,
                    comm:1000,
                    deptno:20
                }
            ],
            firstName:'zhai',
            middleName:'ji',
            lastName:'zhe'
        }
    },
    computed:{
        // 计算的属性简写形式
        tenDeptEmps:function(){
            console.log('===========获取10部门员工信息===============');
            return this.emps.filter(item=>item.deptno==10)
        },
        allEmpsAvgSal:function(){
            return this.emps.reduce((pre,cur)=>pre+cur.sal,0)/this.emps.length
        },
        tenEmpsAvgSal:function(){
            return Math.round(this.tenDeptEmps.reduce((pre,cur)=>pre+cur.sal,0)/this.tenDeptEmps.length)
        },
        name:{
            set:function(val){
                console.log('--------修改计算属性------------',val);
                //利用计算属性的set方法来元数据，计算属性本身不能修改，元数据修改了，就相当于计算属性被改了
                this.firstName=val.split(" ")[0]
                this.middleName=val.split(" ")[1]
                this.lastName=val.split(" ")[2]
            },
            get:function(){
                return this.firstName+" "+this.middleName+" "+this.lastName
            }
        }
    },
    methods:{
        updateSal(index){
            this.emps[index].sal+=500
        },
        addEmps(){
            this.emps.push({
                    empno:'1369',
                    ename:'Monica',
                    job:'MANGER',
                    hiredate:new Date('2020','01','05'),
                    sal:1200,
                    comm:0,
                    deptno:10
                 })
        }
    }
}
</script>

<style>
     table{
        border-collapse: collapse;
        width: 1000px;
    }
    td{
        text-align: center;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>